<template>
  <div class="overall">
    <!-- 通知信息 -->
    <div class="block">
      <span>
        <h3>最新通知</h3>
      </span>
      <el-divider style="border-top:white" />
      <el-timeline :reverse="reverse">
        <el-timeline-item
          v-for="(activity, index) in activities"
          :key="index"
          :timestamp="activity.timestamp"
          placement="top"
        >{{ activity.content }}</el-timeline-item>
      </el-timeline>
    </div>
    <div class="block">
      <span><h3>文件资料</h3></span>
      <el-divider style="border-top:white" />
      <el-timeline :reverse="reverse">
        <el-timeline-item
          v-for="(activity, index) in activities"
          :key="index"
          :timestamp="activity.timestamp"
          placement="top"
        >{{ activity.content }}</el-timeline-item>
      </el-timeline>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Notice',
  data: () => ({
    reverse: true,
    activities: [
      {
        content: '活动按期开始',
        timestamp: '2018-04-15'
      },
      {
        content: '通过审核',
        timestamp: '2018-04-13'
      },
      {
        content: '创建成功',
        timestamp: '2018-04-11'
      }
    ]
  })
}
</script>

<style>
.overall {
  height: auto;
  padding: 24px;
}

.block {
  padding: 30px;
  border: 2px solid #eff2f6;
  display: inline-block;
  width: 49%;
  height: 100%;
  box-sizing: border-box;
}
</style>
